import React, { ReactElement, useEffect } from 'react'
import './login.less'
import logo from "../../assets/images/logo-250px.png"
import { Form, Input, Button, message } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { useDispatch, useSelector, IRouteComponentProps, Link, useHistory, Redirect } from 'umi';
import storageUtils from '../../utils/storageUtils';


interface Props {

}

export default function index(props: IRouteComponentProps): ReactElement {
    const dispatch = useDispatch();
    const history = useHistory()
    const token = useSelector((state: any) => state.loginModel.token);
    useEffect(() => {
        const localToken = storageUtils.getStorage('token');
        if (localToken) {
            dispatch({
                type: 'loginModel/setState',
                payload: {
                    token: localToken,
                },
            });
        }
    }, []);

    const onFinish = (values: any) => {
        console.log('Success:', values);
        dispatch({
            type: 'loginModel/loginSaga',
            payload: values,
        });
        console.log(token);

        if (token) {
            history.push('/home')
        }


    };
    return (
        <div className="main">
            {/* 登录模块 */}
            <div className="panel">
                <div className="logo">
                    <img width="150px" src={logo} alt="" />
                </div>
                <div className="form">
                    <Form
                        name="normal_login"
                        className="login-form"
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '用户名不能为空！',
                                },
                                // {
                                //     pattern: /^[0-9a-zA-Z]{3,8}$/,
                                //     message: '用户名为3~8位，由数字和字母组成！',
                                // }
                            ]}
                        >
                            <Input prefix={<UserOutlined />} placeholder="用户名" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[{
                                required: true,
                                message: '用户名不能为空！',
                            },
                                // {
                                //     pattern: /^[0-9a-zA-Z]{5,8}$/,
                                //     message: '密码为5~8位，由数字和字母组成！',
                                // },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="密码"
                            />
                        </Form.Item>
                        <Form.Item >
                            <Button type="primary" htmlType="submit" className="login-form-button" size="large" style={{width:'100%'}}>
                                立即登录
                            </Button>
                        </Form.Item>
                    </Form>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <Link to="/register">没有账号？去注册</Link>
                        <Link to="/apply">商家入驻</Link>
                    </div>
                </div>
            </div>
        </div>
    )
}
